<template>
	<pro-table ref="protable" :loadDataUrl="loadDataUrl" rowKey="cardVoucherId" :columns="columns" :isRowSelection="true" @selectedRowChange="onSelectChange">
		<!-- 面包屑导航栏右侧按钮，可以不配置 -->
		<template slot="footer">
			<a-space>
				<a-button class="ant-btn-success" @click="edit()">新增</a-button>
				<a-button type="primary" @click="verification()">卡券核销</a-button>
				<a-button type="danger" :disabled="selectedRowKeys.length == 0" @click="showDeleteConfirm()">删除</a-button>
			</a-space>
		</template>
		<!-- <a href="javascript:;" @click="showActivity()" slot="activityName" slot-scope="{ text, record, index }">{{ text }}</a> -->
		<template slot="status" slot-scope="{ text, record, index }">
			<a-tag :color="text == 1 ? '#247cf0' : '#f50'">{{ text == 1 ? '正常' : '作废' }}</a-tag>
		</template>
		<!-- 这些是 table中插槽  end -->
		<a-space slot="operation" slot-scope="{ text, record, index }">
			<a-button type="primary" @click="showStatusConfirm(record)">启停用</a-button>
			<a-button type="primary" @click="showDetails(record)">详情</a-button>
			<a-button type="primary" @click="showDraw(record)">领取用户</a-button>
		</a-space>
		<!-- 新增或者编辑组件 -->
		<add-card-modal ref="addCardModal" @ok="handlerRefresh"></add-card-modal>
		<card-voucher-modal ref="cardVoucherModal"></card-voucher-modal>
		<userlist-modal ref="userlistModal"></userlist-modal>
		<verification-modal ref="verificationModal"></verification-modal>
	</pro-table>
</template>

<script>
import { rowSelection } from '@/mixins'; //列表页面的一些公用方法
import addCardModal from './module/addCardModal'; //新增或编辑组件
import cardVoucherModal from './module/cardVoucherModal';
import userlistModal from './module/userlistModal';
import verificationModal from './module/verificationModal';
import { api } from '@/api/index.js';
const columns = [
	{
		title: '卡券名称',
		dataIndex: 'cardName',
		key: 'cardName',
		ellipsis: true,
		/* 筛选列表 */
		searchInfo: {
			type: 'String', //筛选类型 参考filterbar readme
			value: 'queryData'
		}
	},
	{
		title: '所属活动',
		dataIndex: 'activityName',
		key: 'activityName',
		ellipsis: true
		// scopedSlots: { customRender: 'activityName' }
	},
	{
		title: '卡券状态',
		dataIndex: 'status',
		key: 'status',
		scopedSlots: { customRender: 'status' }
	},
	{
		title: '卡券数量',
		dataIndex: 'publishCount',
		key: 'publishCount',
		customRender: text => {
			return text == 0 ? '无限制' : text;
		}
	},
	{
		title: '有效期天数',
		dataIndex: 'activeDay',
		key: 'activeDay',
		customRender: text => {
			return text == 0 ? '不过期' : text;
		}
	},
	{
		title: '卡券剩余数量',
		dataIndex: 'lastCount',
		key: 'lastCount'
	},
	{
		title: '创建时间',
		dataIndex: 'createdAt',
		key: 'createdAt'
	},
	{
		title: '操作',
		key: 'operate',
		dataIndex: 'operate',
		scopedSlots: { customRender: 'operation' },
		align: 'center',
		width: 260
	}
];
export default {
	name: 'activitylist',
	mixins: [rowSelection],
	data() {
		return {
			columns,
			filter: {},
			loadDataUrl: api.getCardVoucherList //查询列表接口，请在 api/index.js中配置
		};
	},
	components: { addCardModal, cardVoucherModal, userlistModal, verificationModal },
	filters: {},
	methods: {
		/* 刷新列表当前页 */
		handlerRefresh(type = true) {
			this.$refs.protable.handlerRefresh(type);
		},
		showStatusConfirm(record) {
			let _this = this;
			this.$confirm({
				title: '提示',
				content: '你确定要' + (record.status == 1 ? '作废' : '启用') + '这个卡券吗？',
				class: 'confirmbox',
				okType: 'danger',
				onOk() {
					_this.changeEnable(record.cardVoucherId);
				},
				onCancel() {}
			});
		},
		changeEnable(id) {
			this.$postAction(api.changeCardEnable, {
				id
			}).then(res => {
				if (res.result) {
					this.$message.success('改变成功');
					this.handlerRefresh(false);
				}
			});
		},

		/* 编辑 /添加*/
		edit(record) {
			this.$refs.addCardModal.add(record);
		},
		/* 确认是否删除 */
		showDeleteConfirm() {
			let _this = this;
			let title = '你确定要删除吗?';
			this.$confirm({
				title: title,
				content: '删除后，数据将不可恢复',
				class: 'confirmbox',
				okType: 'danger',
				onOk() {
					_this.remove();
				},
				onCancel() {}
			});
		},
		/*删除*/
		remove(delId) {
			this.$postAction(api.delCardVoucher, {
				idList: this.selectedRowKeys
			}).then(res => {
				if (res.result) {
					this.$message.success('succeed to delete');
					this.handlerRefresh();
				}
			});
		},
		showDetails(record) {
			this.$refs.cardVoucherModal.show(record);
		},
		showDraw(record) {
			this.$refs.userlistModal.show(record);
		},
		verification() {
			this.$refs.verificationModal.show();
		}
	}
};
</script>

<style></style>
